<template>
	<div class="index">
        <div class="top">
			<img class="top-img" src="@/assets/img/index/logo.png" alt="">
			<div class="title">
				<p>山西天慈医院</p>
				<p class="title-one">就医指南</p>
			</div>
		</div>
		<div class="list">
			<div class="list-i" :class="v.type==1?'longItem':''" v-for="(v,i) in listData" :key='i' @click="toPageLink(v.path)">
				<div class="list-i-info">
					<div>
						<img class="list-i-info-img" :src="v.img" alt="">
						<div class="list-i-info-btn">{{v.name}}</div>
						<div class='list-i-info-tips' :class="v.path==''?'':'c_fff'">{{v.path==""?'即将开通':'已开通'}}</div>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="textInfo flex3">
			<img class="image" src="@/assets/img/index/text.png" alt="">
			<div class="textInfo-t">电子处方</div>
			<div class="textInfo-num">即将开通</div>
		</div> -->
		<div class="wxInfo">
			<div>
				<img class="wxInfo-img" src="@/assets/img/index/wx.png" alt="">
				<div class="ft12">公众号二维码</div>
			</div>
			<div class="wxInfo-info">
				<div class='wxInfo-info-i' v-for="(v,i) in tipList" :key='i'>
					<div class='dot'></div>
					<div class="wxInfo-info-name">{{v.name}}：</div><p>{{v.tips}}</p>
				</div>
			</div>
		</div>
		<van-overlay :show="show" @click="show = false">
		  <div class="phoneAlter" @click.stop>
		      <div class="phoneAlter-t">是否拨打门诊电话</div>
			  <div class='phoneAlter-num'>0359-6363622</div>
			  <div class='phoneAlter-f flex1'>
				  <div class='btns' @click="show=false">否</div>
				  <div class='btns activeB' @click="callphone('0359-6363622')">是</div>
			  </div>
		  </div>
		</van-overlay>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
                 listData:[
					 {name:'医院介绍',img:require('@/assets/img/index/show3.png'),path:'/show'},
					 {name:'预约挂号',img:require('@/assets/img/index/show9.jpg'),path:'/needRed'},
					 {name:'科室/专家介绍',img:require('@/assets/img/index/show2.png'),path:'/deptList'},
					 {name:'报告查询',img:require('@/assets/img/index/show5.png'),path:'/report'},
					 {name:'脑卒中筛查',img:require('@/assets/img/index/show1.png'),path:'/brainShow'},
					 // {name:'体检中心',img:require('@/assets/img/index/show7.png'),path:'/medicalCenter'},
					 {name:'体检报告查询',img:require('@/assets/img/index/show7.png'),path:'/healthCheckup'},
					 
					 {name:'陪护服务',img:require('@/assets/img/index/show9.png'),path:'/accompanying'},
					 {name:'陪诊服务',img:require('@/assets/img/index/show8.png'),path:'/accompanyingDiagnosis'},
					 {name:'咨询电话',img:require('@/assets/img/index/show6.png'),path:'phone'},
					 {name:'复诊开方',img:require('@/assets/img/index/text.png'),type:1,path:''},
					 {name:'在线问诊',img:require('@/assets/img/index/show4.png'),type:1,path:''},
				 ],
				 tipList:[
					 {name:'手机预约挂号',tips:'电子报告查询'},
					 {name:'医保移动支付',tips:'专家在线咨询'},
					 {name:'门诊咨询',tips:'0359-6363622'},
					 {name:'急诊急救',tips:'0359-6363622（24小时）'}
				 ]
			};
		},
		created() {
          // var url='https://mitest.wecity.qq.com/oauth/code?authType=2&isDepart=2&appid=wx7cbe187d6eb21122&cityCode=140800&channel=AAF8RKa8_PZe9HVUKooL_CkA&orgChnlCrtfCodg=BqK1kMStlhVDgN2uHf4EsLK/F2LjZPYJ81nK2eYQqxuuhDM0QKZXGvqslIQejZyx&orgCodg=H14089904375&bizType=04107&orgAppId=1HF351OT70PK3F60C80A00004DFE7203&redirectUrl=https%3A%2F%2Fguahao.tcyy.org.cn%2F%23%2FyibaoPay'
          // console.log(decodeURI(url))
		},
		components: {

		}, 
		methods: {
			callphone (phonenumber) {
				this.show=false
			    window.location.href = 'tel:' + phonenumber
			},
			toPageLink(url){
				if(url==''){
					return
				}
				if(url=='phone'){//门诊电话
					return this.show=true
				}
				this.$store.commit("updateportInfo",{});
				this.$router.push({
					path:url,
					query:{},
				})
			}
		}
	};
</script>
<style>html{background: #fff;}</style>
<style lang="less" scoped>
	.phoneAlter{
		padding:16px 12px 0 12px;
		width:270px;
		border-radius: 6px;
		background-color: #fff;
		margin:35vh auto 0 ;
		text-align: center;
		&-t{
			font-size:14px;
			padding-bottom:15px;
		}
		&-num{
			font-size:20px;
			padding-bottom:20px;
			color: #41c6ab;
			font-weight: 500;
		}
		&-f{
			padding:12px 40px;
			border-top: 1px solid #ededed;
			.btns{
				color: #333;
				font-size: 14px;
				height:28px;
				line-height: 28px;
				width:70px;
				border-radius: 30px;
				background-color: #f2f2f2;
			}
			.activeB{
				color:#41c6ab;
			}
		}
	}
	.index{
		padding: 24px 14px 0 14px;
		width: 100%;
		min-height: 100vh;
		background: #fff;
		.textInfo{
			width: 323px;
			height:30px;
			background: linear-gradient(0deg, #59D1B0 0%, #40C8D6 100%);
			border-radius: 7px;
			margin: 10px auto 0 auto;
			&-num{
				font-family: MiSans;
				font-weight: 600;
				font-size: 8px;
				color: #515253;
				margin-left: 11px;
			}
			&-t{
				font-family: MiSans;
				font-weight: 600;
				font-size: 14px;
				color: #FFFFFF;
			}
			.image{
				width: 18px;
				height: 19px;
				margin-right:11px;
			}
		}
		.wxInfo{
			padding:16px 0 30px 0;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			.ft12{
				font-size:12px;
				color:#909090;
				text-align: center;
			}
			&-info{
				padding-top:4px;
				// width: calc(100% - 72px);
				&-i{
					display: flex;
					align-items: center;
					margin-bottom: 4px;
				}
				.dot{
					width: 8px;
					height: 8px;
					border-radius: 50%;
					margin: 0 5px;
					background-color: #fd9e2d;
				}
				&-name{
					font-size: 13px;
					font-family: MiSans;
					font-weight: 600;
					color: #3B538F;
				}
				p{
					color:#515253;
					font-size: 13px;
					font-family: MiSans;
				}
			}
			&-img{
				width: 76px;
				height: 76px;
			}
		}
		.longItem{
			width: 50% !important;
			.list-i-info{
				width:calc(100% - 8px);
			}
		}
		.list{
			padding: 0 4px;
			&-i{
				width:calc(100% / 3);
				height: 107px;
				display: inline-block;
				margin-bottom: 8px;
				&-info{
					width: 108px;
					height: 107px;
					background: #FFFFFF;
					border: 1px solid rgba(228,230,233,0.71);
					border-radius: 18px;
					margin: auto;
					display: flex;
					align-items: center;
					justify-content: center;
					&-img{
						height: 37px;
						display: block;
						margin: 0 auto 15px auto;
					}
					&-btn{
						padding: 0 2px;
						min-width:88px;
						height: 23px;
						background: linear-gradient(0deg, #5BD2AD 0%, #3FC7D8 100%);
						border-radius: 10px;
						font-size: 14px;
						font-family: MiSans;
						font-weight: 600;
						color: #FFFFFF;
						text-align: center;
						line-height: 23px;
					}
					&-tips{
						font-size:11px;
						text-align: center;
						padding-top: 4px;
					}
				}
			}
		}
		.top{
			width: 346px;
			height: 133px;
			background: linear-gradient(0deg, #5CD2AC 0%, #3FC7D8 100%);
			border-radius:18px;
			position: relative;
			margin-bottom: 14px;
			.title{
				font-size:28px;
				font-family: MiSans;
				font-weight: 500;
				color: #FFFFFF;
				padding-top: 28px;
				padding-left: 15px;
				&-one{
					position: absolute;
					right: 13px;
					font-size: 33px;
					padding-top: 14px;
					font-weight:600;
				}
			}
			&-img{
				position: absolute;
				width: 113px;
				height: 115px;
				opacity: 0.32;
				left: 21px;
				top: 10px;
			}
		}
	}
</style>